<template>
    <div>{{ $route.params.class }}</div>
    <div>
        <el-table :border="true" stripe :data="studentInfos" style="width: 100%">
            <el-table-column prop="id" label="学号" width="200" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="live" label="宿舍" width="100" />

            <el-table-column prop="score" label="成绩">
                <template #default="{ row, column, $index }">
                    {{ row.score >= 60 ? '及格' : '挂科' }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="300">
                <template #default>
                    <span>
                        <el-button size="small">查看</el-button>
                        <el-button size="small" type="primary">修改</el-button>
                        <el-button size="small" type="danger">删除</el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="handleLogout()">登出</el-button>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import FancyButton from './FancyButton.vue'
import BaseLayout from './BaseLayout.vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { useCountStore } from '@/store/counterStore'
import { useTokenStore } from '@/store/tokenStore'

const store = useCountStore()
const tokenStore = useTokenStore()

console.log(store.count)
console.log(store.doubleCount)
console.log(tokenStore.token)

const route = useRoute()
const router = useRouter()
// console.log(route)
// console.log(router)
const who = ref('teacher')
const studentInfos = ref([
{ id:20250228,name: '新一',live:'善书院',score:90},
    { id:20250229,name: '雪豹',live:'馨馨书院',score:85},
    { id:20250230,name: '丁真',live:'创创创书院',score:61},
    { id:20250231,name: '王源',live:'实实实实书院',score:59},
    { id:20250232,name: '赵四',live:'方方方方方方方方书院',score:60},
    { id:20250233,name: '老八',live:'拾德书院',score:30}
])
const studentInfoKeys = reactive({
    id: '学号',
    name: '姓名',
    live: '宿舍',
    score: '成绩'
})

function handleLogout() {
    tokenStore.token = ''
    router.push('/login')
}

onMounted(() => {
    axios
        .get('/api/students', 'get')
        .then((response) => {
            studentInfos.value = response.data.students
        })
        .catch((error) => {
            console.log(error)
        })
})
</script>
